<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">

	$(function(){

		fillOwner()//铺垫条件查询的所有者下拉框

		showTranList()


//给查询绑定事件，执行条件查询
		$("#queryTranBtn").click(function () {
				//alert("事件绑定成功")
			//将条件查询框中的内容 填充到 隐藏域中

			$("#hidden-owner").val($.trim($("#tran-owner").val()))
			$("#hidden-name").val($.trim($("#tran-name").val()))
			$("#hidden-customerId").val($.trim($("#tran-customerId").val()))
			$("#hidden-stage").val($.trim($("#tran-stage").val()))
			$("#hidden-type").val($.trim($("#tran-type").val()))
			$("#hidden-source").val($.trim($("#tran-source").val()))
			$("#hidden-contactsId").val($.trim($("#tran-contactsId").val()))


			//调用分页查询
			showTranList()


		})



//给898修改绑定事件,执行打开修改交易模态窗口
		$("#editTranBtn").click(function () {
			//alert("绑定事件成功")
			var $xz=$("input[name=tran]:checked")

			/*var parameter="";

			for (var i=0;i<$xz.length;i++){
				var id=$xz[0].value

				parameter+="id="+id;

				if(i<$xz.length-1){
					parameter+="&"
				}

			}
			alert(parameter)*/



			if($xz.length==0){
				alert("请选择你需要修改的交易")

			}else if ($xz.length>1){
				alert("每次最多选择一条交易修改")

			}else {
				var tranId=$xz[0].value
				//alert("需要修改的交易id是"+tranId)


				window.location.href="tran/editTran.do?tranId="+tranId;






			}


		})


//复选框全选

		$("#qx").click(function () {//通过全选框操作其他复选框
				//alert("事件绑定成功")

			$("input[name=tran]").prop("checked",this.checked)

		})

		//通过复选框操作全选框
		$("#tranList").on("click",$("input[name=tran]"),function () {

			$("#qx").prop("checked",($("input[name=tran]:checked").length==$("input[name=tran]").length?true:false))

		})





	});
//页面加载完毕=========================================================================================


//条件查询结合分页查询，刷新交易列表
	function showTranList() {

		//将隐藏域中的内容 取出 当做请求参数发给后台

		var owner=$("#hidden-owner").val()
		var name=$("#hidden-name").val()
		var customerId=$("#hidden-customerId").val()
		var stage=$("#hidden-stage").val()
		var type=$("#hidden-type").val()
		var source=$("#hidden-source").val()
		var contactsId=$("#hidden-contactsId").val()


		$.ajax({
			url:"tran/showTranList.do",
			type:"get",
			data:{
				"owner":owner,
				"name":name,
				"customerId":customerId,
				"stage":stage,
				"type":type,
				"source":source,
				"contactsId":contactsId

			},
			dataType:"json",
			success:function (resp) {
		/*
			resp:
				{"total":100,"tranList"}

		 */
			var html="";//刷新交易列表
			$.each(resp.tranList,function (i,n) {
					html+='<tr>';
					html+='<td><input type="checkbox" name="tran" value="'+n.id+'" /></td>';
					html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'tran/detail.do?id='+n.id+'\'">'+n.name+'</a></td>';
					html+='<td>'+n.name+'</td>';
					html+='<td>'+n.stage+'</td>';
					html+='<td>'+n.type+'</td>';
					html+='<td>'+n.owner+'</td>';
					html+='<td>'+n.source+'</td>';
					html+='<td>'+n.contactsId+'</td>';
					html+='</tr>';


			})

				$("#tranList").html(html)//刷新交易列表

			}



		})

	}


//铺垫条件查询的所有者下拉框
	function fillOwner() {
		$.ajax({

			url:"tran/fillOwner.do",
			type:"get",
			data:{

			},
			dataType:"json",
			success:function (resp) {
		/*
			resp:
				{"userList",用户列表}
		 */

				var html="<option></option>";
				$.each(resp.userList,function (i,n) {
					html+='<option value="'+n.id+'">'+n.name+'</option>'

                    })

				//从session域中获取当前登录用户
				var currentUser="${sessionScope.user.id}"

				$("#tran-owner").html(html)//铺垫所有者下拉框

				$("#tran-owner").val(currentUser)//将下拉框的默认设置为当前登录用户

                }

            })
        }

    </script>
    </head>
    <body>



        <div>
            <div style="position: relative; left: 10px; top: -10px;">
                <div class="page-header">
                    <h3>交易列表</h3>
                </div>
            </div>
        </div>

        <div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

            <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

                <div class="btn-toolbar" role="toolbar" style="height: 80px;">
                    <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                    <!--条件查询的隐藏域，用于条件查询结合分页查询-->
                        <input type="hidden" id="hidden-owner">
                        <input type="hidden" id="hidden-name">
                        <input type="hidden" id="hidden-customerId">
                        <input type="hidden" id="hidden-stage">
                        <input type="hidden" id="hidden-type">
                        <input type="hidden" id="hidden-source">
                        <input type="hidden" id="hidden-contactsId">





                      <div class="form-group">
                        <div class="input-group">
                          <div class="input-group-addon">所有者</div>
    <%--
                          <input class="form-control" type="text" id="tran-owner">
    --%>
						<select class="form-control" id="tran-owner">
							<%--<option>傻子</option>
							<option>篮子</option>--%>
						</select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="tran-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">客户名称</div>
				      <input class="form-control" type="text" id="tran-customerId">
				    </div>
				  </div>
				  

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">阶段669</div>
					  <select class="form-control" id="tran-stage">
					  	<option></option>
						<c:forEach items="${applicationScope.stage}" var="stage">
							<option value="${stage.value}">${stage.text}</option>
						</c:forEach>
					  </select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">类型</div>
					  <select class="form-control" id="tran-type">
					  	<option></option>
						  <c:forEach items="${applicationScope.transactionType}" var="type">
							  <option value="${type.value}">${type.text}</option>
						  </c:forEach>

					  </select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">来源</div>
				      <select class="form-control" id="tran-source">
						  <option></option>
						  <c:forEach items="${applicationScope.source}" var="source">
							<option value="${source.value}">${source.text}</option>
						  </c:forEach>

						</select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">联系人名称</div>
				      <input class="form-control" type="text" id="tran-contactsId">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="queryTranBtn">查询8856</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 10px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" onclick="window.location.href='tran/add.do';"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="editTranBtn"><span class="glyphicon glyphicon-pencil"></span> 898修改</button>
				  <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox"  id="qx"/></td>
							<td>名称98</td>
							<td>客户名称</td>
							<td>阶段</td>
							<td>类型</td>
							<td>所有者</td>
							<td>来源</td>
							<td>联系人名称</td>
						</tr>
					</thead>
					<tbody id="tranList">
						<%--<tr>
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='tran/detail.do';">动力节点-交易01</a></td>
							<td>动力节点</td>
							<td>谈判/复审</td>
							<td>新业务</td>
							<td>zhangsan</td>
							<td>广告</td>
							<td>李四</td>
						</tr>
                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">动力节点-交易01</a></td>
                            <td>动力节点</td>
                            <td>谈判/复审</td>
                            <td>新业务</td>
                            <td>zhangsan</td>
                            <td>广告</td>
                            <td>李四</td>
                        </tr>--%>
					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 20px;">
				<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>
			</div>
			
		</div>
		
	</div>
</body>
</html>